/*
 * @Description: 主页
 * @Author: rendc
 * @Date: 2022-06-15 10:29:19
 * @LastEditors: 哈哈 8300395+xue-guangxu@user.noreply.gitee.com
 * @LastEditTime: 2022-06-15 21:43:01
 */

import React from 'react';
import { Card, Toast, Button } from 'antd-mobile';
import { Input } from 'antd-mobile'
import { SearchBar, Space} from 'antd-mobile'
import { Tabs } from 'antd-mobile'
import { IndexBar, List } from 'antd-mobile'
import { Collapse } from 'antd-mobile'
import { PullToRefresh} from 'antd-mobile'


class Main extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  render () {
    const onClick = () => {
      Toast.show('点击了卡片')
    }
    
    return (
      <>

      <div style={{ height: "100%", backgroundColor: "rgb(228, 228, 228)"}}>
        
      <div>
        <h2>联系人</h2> 
      </div>
      <div style={{ marginBottom:"10px"}}>
      <SearchBar placeholder='搜索' />
      </div>
      <div style={{ marginBottom:"10px"}}>
      <Card title='可能认识的人' onClick={onClick} >
        <h3 >似水浮流年</h3> 
        <h3>192056127薛</h3> 
        </Card>
      </div>
      <div>
      <Tabs>
          <Tabs.Tab title='好友' key='fruits'>

          </Tabs.Tab>
          <Tabs.Tab title='分组' key='vegetables'>
          <div>
          <Collapse defaultActiveKey={['1']}>
          <Collapse.Panel key='1' title='特别关心'>
            <div>a</div>
            <div>b</div>
          </Collapse.Panel>
          <Collapse.Panel key='2' title='我的好友'>
            
          </Collapse.Panel>
          <Collapse.Panel key='3' title='朋友'>
            
          </Collapse.Panel>
        </Collapse>
          </div>
          </Tabs.Tab>
          <Tabs.Tab title='群聊' key='animals'>
          <div>
          <Collapse defaultActiveKey={['1']}>
          <Collapse.Panel key='1' title='顶置群聊'>
            <div>1</div>
            <div>2</div>
          </Collapse.Panel>
          <Collapse.Panel key='2' title='我加入的群聊'>
            
          </Collapse.Panel>
          <Collapse.Panel key='3' title='我管理的群聊'>
            
          </Collapse.Panel>
        </Collapse>
          </div>
          </Tabs.Tab>
        </Tabs>
      </div>
      </div>
      </>
    )
  }
}

export default Main